<template>
  <div class="content">
    <div class="basicInfo">
      <div style="flex: 1.5;" >
        <span>
          赛事名称：
          <b>{{pageData.name}}</b>
        </span>
        <span>
          裁判长：
          <b>{{pageData.referee}}</b>
        </span>
        <a style="margin-left: 10px;" :href="ApplyUrl" download="报名信息">
          <el-button type="primary" size="small" @click="opens" v-loading="loading" style="float: right;">导出报名信息</el-button>
        </a>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%;" border>
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="team_name" label="团体名称" width="200"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="age" label="年龄" width="50"></el-table-column>
        <el-table-column prop="sex" label="性别" width="50"></el-table-column>
        <el-table-column prop="card" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="group" label="项目-组别" width="100"></el-table-column>
        <el-table-column v-if="showTeam" prop="team_name" label="团体名称" ></el-table-column>
        <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
        <el-table-column prop="customize" label="单位"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="create_time" label="报名时间"></el-table-column>
        <el-table-column prop="options" label="操作">
          <template slot-scope="scope">
            <span @click="editInfo(scope.row) " :style="{color:'#409eff',cursor: 'pointer'}">{{scope.row.options.edit}}</span><span> | </span>
            <span @click="delUser(scope.row.id)"  :style="{color:'#f40',cursor: 'pointer'}">{{scope.row.options.del}}</span>
           </template>
        </el-table-column>
      </el-table>

      <!-- 修改报名信息对话框 -->
      <el-dialog  title="修改报名信息" :visible.sync="editDialogVisible" width="500px">
        <el-form  :model="signForm" :rules="editFormRules" ref="signFormRef" label-width="110px" class="demo-ruleForm">
          <el-form-item  label="姓名:" prop="name">
            <el-input v-model="signForm.name" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item v-if="ref1" :label="pageData.require[0]" prop="customize1">
            <el-input v-model="signForm.cust.cust1" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item v-if="ref2" :label="pageData.require[1]" prop="customize2">
            <el-input v-model="signForm.cust.cust2" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item v-if="ref3" :label="pageData.require[2]" prop="customize3">
            <el-input v-model="signForm.cust.cust3" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="身份证号码:" prop="card">
            <el-input v-model="signForm.card" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="手机号码:" prop="phone">
            <el-input v-model="signForm.phone" style="width:70%;"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitEdit ">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageData:{},
      showTeam:false,
      editDialogVisible:false,
      signForm:{
        cust:{
          cust1:'',
          cust2:'',
          cust3:''
        }
      },
      ref1:false,
      ref2:false,
      ref3:false,
      loading:false,
      empty:{},
      customize:'',
      customize1:'',
      customize2:'',
      customize3:'',
      // 添加角色表单规则对象
      editFormRules: {
        name: {
          min: 2,
          max: 16,
          required: true,
          message: '请输入姓名 2~16个字符',
          trigger: 'blur'
        },
        matchName: {
          required: true,
          message: '请选择项目名称',
          trigger: 'blur'
        },
        card: {
          required: true,
          message: '请输入身份证号码',
          trigger: 'blur'
        },
        phone: {
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }
      }
    }
  },
  created() {
    this.getSignList();
    this.getMatchInfo();
  },
  computed:{
    ApplyUrl() {
      let com_id  = this.$route.query.com_id;
      let user_id = sessionStorage.getItem('user_id')
      let url = this.$axios.defaults.baseURL + '/TeamSign/export_list?com_id=' + com_id+'&user_id='+user_id;
      return url;
    }
  },
  methods: {
    opens() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 800);
    },
    //获取已报名列表
    async getSignList() {
      this.showTeam = this.$route.query.showTeam
      let com_id  = this.$route.query.com_id;
      let user_id = sessionStorage.getItem('user_id')
      try {
        let result = await this.$axios.post(
          "/TeamSign/sign_list",
          {
            com_id,
            user_id
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        );
				this.$message({
				   message: result.data.message,
				   type: 'success'
				 });
        let tableData = [];
        result.data.data.forEach((item) => {
            tableData.push({
                card: item.card,
                age:item.age,
                sex:item.sex===1?'女':'男',
                project_id:item.project_id,
                price:item.price,
                name:item.name,
                customize:item.customize,
                create_time:item.create_time,
                phone:item.phone,
                options:{
                  edit:'修改',
                  del:'删除'
                },
                id:item.id,
                group:item.group,
                team_name:item.team_name==null?"":item.team_name,
            })
          });
        this.tableData=tableData
        console.log(result)
        console.log(this.tableData)
        // this.$forceUpdate();
      } catch (err) {
				this.$message({
				   message: err,
				   type: 'error'
				 });
        throw new Error(err);
      }
    },
    // 获取赛事信息
    async getMatchInfo() {
      // this.loading = true
      let com_id  = this.$route.query.com_id;
      try {
        let result = await this.$axios.post(
          "/TeamSign/com_info",
          {
            com_id
          },
          {
            headers: {
              token: window.sessionStorage.getItem("token")
            }
          }
        );
        this.pageData = result.data.data;
        // this.loading = false
        console.log(this.pageData);
        // console.log(2)
        if(this.pageData.require.length==1){
            this.ref1 = true,
            this.ref2 = false,
            this.ref3 = false
        }
        if(this.pageData.require.length==2){
            this.ref1 = true,
            this.ref2 = true,
            this.ref3 = false
        }
        if(this.pageData.require.length==3){
            this.ref1 = true,
            this.ref2 = true,
            this.ref3 = true
        }
      } catch (err) {
        throw new Error(err);
      }
    },
    // 修改报名信息
    showEditDialog(){
      this.editDialogVisible = true
    },
    // 提交修改后的表单
    submitEdit(){
      let id = this.signForm.id
      let name=this.signForm.name
      let card=this.signForm.card
      let phone=this.signForm.phone
      let com_id = this.$route.query.com_id
      if(this.ref1){
        this.customize1=this.signForm.cust.cust1
        if(this.ref2){
          this.customize2=this.signForm.cust.cust2
          if(this.ref3){
            this.customize3=this.signForm.cust.cust3
          }
        }
      }else{
        return
      }
       // 判断自定义内容是否填完
      if(name==null||card==null||phone==null||this.customize1==undefined||this.customize2==undefined||this.customize3==undefined){
        console.log(this.signForm)
        this.$message({
            message: '请检查表单是否填写完整!',
            type: 'error',
          });
        return
      }
      if(this.customize1!==undefined&&this.ref1){
        this.customize = this.signForm.cust.cust1
        if(this.customize2!==undefined&&this.ref2){
          this.customize = this.signForm.cust.cust1+','+this.signForm.cust.cust2
          if(this.customize3!==undefined&&this.ref3){
            this.customize = this.signForm.cust.cust1+','+this.signForm.cust.cust2+','+this.signForm.cust.cust3
          }
        }
      }else{
        // console.log(customize)
        // console.log(this.customize1!==undefined,this.ref1)
      }
      let customize = this.customize
      // console.log(customize)
      this.$refs.signFormRef.validate(async valid =>{
        if(!valid) return
        const {data:res} = await this.$axios.post( '/TeamSign/sign_edit',
        {
          id,
          name,
          card,
          phone,
          customize,
          com_id
        },{
          headers: {
              token: window.sessionStorage.getItem("token")
            }
        })
        console.log(res)
        if(res.code == 2000){
          this.signForm.customize = customize
          // console.log(this.tableData)
          this.$message({
            message: res.msg,
            type: 'success',
          });
        }
      })
      // console.log(4)
      this.editDialogVisible = false
    },
    editInfo(info){
      let arr = Object.entries(info)[6][1]
      let custArr = arr.split(',')
      let cust1 = custArr[0]
      let cust2 = custArr[1]
      let cust3 = custArr[2]
      this.signForm =info
      this.signForm.cust = {
        cust1,
        cust2,
        cust3
      }
      this.showEditDialog()
    },
    // 根据ID删除用户
    delUser(id){
      this.$confirm('您确定要删除该运动员吗?此操作不可撤销!', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      })
      .then(()=>{
        console.log(id)
         this.$axios.post('/event/del_the_player', {id:id},{
                  headers: {
                    token: window.sessionStorage.getItem('token')
                  }
                })
           .then(res => {
             console.log(res)
             if(res.data.code==2000){
               this.$message({
                 type: 'success',
                 message: res.data.msg
               })
               this.getSignList()
             } else {
               this.$message({
                 message: res.data.message,
                 type: 'error'
               })
               this.getSignList()
             }
            })
         })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  }
};
</script>

<style lang="less" scoped="scoped">
.content {
  width: 90%;
  margin-left: 40px;
  padding-top: 30px;
}
.demo-ruleForm{
  .el-form-item__label{
    text-align: left!important;
  }
}
.basicInfo {
  background: linear-gradient(
    90deg,
    rgba(66, 185, 131, 0.2),
    rgba(66, 185, 131, 0.4)
  );
  border-radius: 2px;
  line-height: 30px;
  height: 30px;
  padding: 15px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;

  span {
    margin-right: 20px;
  }

  .btnGroup {
    /*height: 60px;*/
    /*float: right;*/
    margin-right: 20px;
  }

  .date {
    width: 25%;
    padding: 10px 15px;
  }
}
.table {
  margin-top: 30px;
  .table-text::before {
    content: "*";
    color: red;
    font-size: 20px;
    position: relative;
    top: 5px;
  }
  .tableItem {
    margin-top: 30px;
  }
}
</style>
